Ghost Inspectorを使ってコードを書かずにE2Eテストを自動化する

E2Eテスト自動化したいなーという気持ちでSeleniumを触ったりjsoupで頑張ってみたりしていたことがあるのですが、どうしてもメンテナンスコストなどの問題で諦めることが多かったです。

Ghost Inspectorを軽く触ったところ、少なくともテストを1ケース作ることに関してはかなりの手軽さを感じたので本記事で紹介させていただきます。

Ghost Inspector

Ghost Inspector

Ghost Inspector is an automated website testing and monitoring service that checks for problems with your website or application. It carries out operations in a browser, the same way a user would, to ensure that everything is working properly. Getting Started - Ghost Inspector

大雑把な説明としては、

• テスト対象のサイトを直接操作し、操作の記録とアサーションの定義が可能
• 記録したテストをGhost Inspectorから実行可能

といったものです。コードを書かずにテストの定義ができるところが大きな特徴かと思います。

やってみる

本記事では、

• Ghost Inspectorの利用準備
• テストケースの定義し、テストを実行
• 定義したテストが失敗するコードをデプロイし、テストを実行
• Ghost Inspectorから直接テストを修正し、テストを実行

までをやってみます。

Ghost Inspectorの利用準備

Chrome拡張のインストール

テスト対象のページに対してChrome拡張を使ってテストケースを設定していくため、Chrome拡張をインストールします。

Ghost Inspectorにサインインすると以下のリンクが表示されるので、Chrome拡張をインストールします。

テストケースの定義

テスト対象のページを開き、テストケースを定義していきます。

今回は簡単なカウンターのページに対してのテストを行います。 Addボタンを3回押すと、カウンターの数値が3になる、というテストを定義してみます。

テストケースを定義を始める

テスト対象のページを開いた状態で、Ghost InspectorのChrome拡張のアイコンをクリックします。

Start Recordingでテストケースの定義を開始します。

Chrome拡張のアイコンが緑になっている間の操作は、Ghost Inspectorによって記録されます。

操作を記録する

この状態でテスト対象のページを操作します。今回はAddボタンを3回押します。

アサーションを定義する

カウンターが3になったところで、再度Chrome拡張のアイコンを押します。 Make Assertionsをクリックすると、操作の記録ではなくアサーションの定義を行うモードに切り替わります。

この状態でアサーション対象のエレメント、今回の場合はCount:3の部分をクリックすると、アサーションが定義されます。

テストケースの作成

再度Chrome拡張のアイコンをクリックし、I'm Finished Recordingをクリックします。

テスト名を入力し、Save This Testをクリックします。

View Your TestをクリックするとGhost Inspector側の管理画面が開きます。 少し待つと、定義したテストの内容が確認できます。

テストを実行

Run Testからテストを実行できます。この再実行されるテストは、現在デプロイされているページに対する操作およびアサーションです。

テスト結果は成功、失敗の確認だけではなく操作を録画したビデオを確認することができます。

失敗時の原因追求に良さそうです。

ソースコードを修正して再度テストを実行

わざとテストに失敗するようコードを修正して再度テストを実行してみます。

カウンターの数値が3桁で0埋めされるようにしてみました。

再度テストを実行すると、アサーションに失敗することが確認できました。

テストケースを修正してみる

再度1からテストケースを記録し直してもいいのですが、管理画面から直接テストケースを修正することも可能です。

Editからテストケースの編集を行うことができます。

検証対象の文字列を変更し、テストケースを保存します。

再度テストを実行します。

修正後のテストケースが通ることが確認できました。

他のサービスとの連携について

Ghost Inspectorは様々なツールとの統合が準備されています。

各サービスとの連携についてはこちらの公式ドキュメントを参照ください。 ポイントはGhost Inspectorのテスト対象はコードではなくデプロイされたページである、ということです。

本記事ではGitHub Pagesへコードをデプロイしています。 Ghost InspectorをGitHubと統合することで、コードのpushに対してテストを実行したり、PRのページからテストの実行結果を確認することが可能です。

しかし、テスト対象はあくまでデプロイされたページなので、テストがデプロイ後に実行される必要があります。

そのため、GitHubと直接連携するよりも、他のCIサービスと連携し、パイプラインの中でデプロイ→Ghost Inspecorによるテスト、といった流れでの連携を行う必要がありそうです。

まとめ

• Ghost Inspectorは、ブラウザを使ったテストを自動化するためのサービス
• Chrome拡張を使用することで、コードを書かずにテスト対象にページを操作しながらテストを定義できる
• 各サービスとの連携が可能

E2Eテストの定義を簡単に行うことができると感じました。ただし、やはりテストの量が増えてくるとメンテナンスのコストはそれなりに必要な気がします。

大規模なページで本格的にテストを行う場合、コードの修正に対してテストを修正する必要が最小限で済むような設計がポイントになってくるように思えます。 もしくは、主要なユースケースのみ定義しておくことである程度安心感を持って開発を進められるような気がしました。 学習コストが低いことなど含めて非常に有用なサービスだと感じます。

私からは以上です。